<template>
	<view class="p-4">
		<view v-for="(item, index) in scheduleList" :key="index"
			class="bg-gray-200 rounded-lg shadow-md p-4 mb-5 transform transition-transform hover:scale-105 font-kai">
			<div class="flex justify-between mb-2">
				<span class="text-gray-600">营期: </span>
				<span class="text-gray-800 text-right">{{ item.currentSessionNumber }}</span>
			</div>
			<div class="flex justify-between mb-2">
				<span class="text-gray-600">班级名称: </span>
				<span class="text-gray-800 text-right">{{ item.className }}</span>
			</div>
			<div class="flex justify-between">
				<span class="text-gray-600">大组名称: </span>
				<span class="text-gray-800 text-right">{{ item.largeGroupName }}</span>
			</div>
			<div class="flex justify-between">
				<span class="text-gray-600">小组名称: </span>
				<span class="text-gray-800 text-right">{{ item.smallGroupName }}</span>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scheduleList: []
			};
		},
		onLoad() {
			this.getGroups();
		},
		methods: {
			getGroups() {
				let userinfo = uni.getStorageSync('userInfo');
				uni.request({
					url: 'http://localhost:9090/user/getClassAndGroup',
					method: 'POST',
					data: {
						id: userinfo.id
					},
					success: (res) => {
						this.scheduleList = res.data.data;
					},
					fail: (err) => {
						console.error('获取课程列表失败:', err);
					}
				});
			}
		}
	};
</script>


<style>
	/* 卡片的整体样式 */
	.bg-gray-200 {
		background-color: #f3f4f6;
	}

	/* 卡片的边框样式 */
	.border {
		border-width: 1px;
	}

	.border-gray-300 {
		border-color: #e5e7eb;
	}

	/* 阴影样式 */
	.shadow-md {
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	}

	/* 文本颜色和大小 */
	.text-gray-600 {
		color: #6b7280;
	}

	.text-gray-800 {
		color: #1f2937;
	}

	.text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	/* 楷体字体 */
	.font-kai {
		font-family: KaiTi, STKaiti, serif;
	}

	/* 卡片间隔 */
	.mb-5 {
		margin-bottom: 1.25rem;
		/* 20px */
	}

	/* 文本右对齐 */
	.text-right {
		text-align: right;
	}
</style>